@import './variables.module.scss';
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  #app{
    // color:$fontColor;
  }
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
input[type="text"] {-webkit-appearance: none;}
// label {
  // font-weight: 700;
// }
ul,li,dt,dd{
  margin:0;list-style:none;padding:0;
}

.c-red{color:$red;}
.c-green{color:$green;}
.c-gray{color:#999;}



html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}


.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

// 文本省略
.txt-ellipsis{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
// 取消文本省略
.no-ellipsis{text-overflow:inherit;white-space: normal;}

// 字体颜色类 c = color
@each $color, $val in (red, $red),(blue, $blue),(yellow,$yellow),(green,$green),(pink,$pink),(purple,$purple),(gray,$gray){
  .c-#{$color} {color: $val};
  .bg-#{$color} {background: $val};
}

// 状态颜色值
$status-color:$red, $green, $blue, $yellow;
@each $c in $status-color{
  $i:index($status-color,$c);
  .status-#{$i} {
      color: nth($status-color,$i);
  }
}

// 字体大小 fs = font-size
@each $font in 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 24, 28, 30, 32, 36, 42, 46, 48{
  .fs-#{$font}{font-size: $font + px};
}
.fs-10{font-size:20px;transform: scale(0.5);}
// 宽度百分比 per = percent
@each $percent in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100{
  .per-#{$percent}{width: $percent + '%'};
}
// 宽度像素 wd = width
@each $width in 16, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,190, 200, 210, 240, 250, 280, 300{
  .wd-#{$width}{width: $width + px};
}
// 最小宽度像素 mwd = min-width
@each $width in 16, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,190, 200, 210, 240, 250, 280, 300{
  .mwd-#{$width}{min-width: $width + px};
}
// 剩余宽度 wd-calc = width: calc(); 
@each $width in 16, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180,190, 200, 210, 240, 250, 280, 300{
  .wd-calc-#{$width}{width: calc(100% - #{$width}px)};
}
// 间隔 m = margin, p = padding, t = top, b = bottom, r = right, l = left, x = left right, y = top bottom, a = top right bottom left;
@each $size in 5, 6, 8, 10, 12, 14, 15, 16, 18, 20, 24, 25, 30, 40, 50, 60, 70, 80, 90, 100 {
  .m-t-#{$size}{margin-top:$size + px;}
  .m-b-#{$size}{margin-bottom:$size + px;}
  .m-l-#{$size}{margin-left:$size + px;}
  .m-r-#{$size}{margin-right:$size + px;}
  .m-x-#{$size}{margin-left:$size + px;;margin-right:$size + px;}
  .m-y-#{$size}{margin-top:$size + px;;margin-bottom:$size + px;}
  .m-a-#{$size}{margin:$size + px;}
  .p-t-#{$size}{padding-top:$size + px;}
  .p-b-#{$size}{padding-bottom:$size + px;}
  .p-l-#{$size}{padding-left:$size + px;}
  .p-r-#{$size}{padding-right:$size + px;}
  .p-x-#{$size}{padding-left:$size + px;;padding-right:$size + px;}
  .p-y-#{$size}{padding-top:$size + px;;padding-bottom:$size + px;}
  .p-a-#{$size}{padding:$size + px;}
}

// 线
@each $position in 'top','right','bottom','left'{
  .line-#{$position}{border-#{$position}: 1px solid $lineColor};
}
.line-v-center{
  position: relative;
    &:before{
      content:'';position:absolute;left:50%;top:0;height:100%;width:1px;background:$lineColor;
    }
  
}

.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

.align {
  &-center{
    text-align: center
  }
  &-right{
    text-align: right;
  }
  &-left{
    text-align: left;
  }
}

// flex布局
.flex{
  &-block{
      display:flex;
  }
  &-no{
      display:block;
  }
  &-between{
      display:flex; justify-content: space-between;align-items:center;
      .content{flex:1;}
  }
  &-around{
      display:flex;justify-content: space-around;align-items:center;
  }
}

// 手势
.cursor{cursor:pointer;
  // &:hover{text-decoration: underline;}
}



// 清除浮动
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.fl{float:left;}
.fr{float:right;}

.label-span{
  display:flex;
  label{
    color:#999;
  }
  &.el-row{
    display:block;
    .el-col{
      display:flex;margin-bottom:15px;font-size:14px;line-height:18px;
      label{text-align:right;}
      span{flex:1;}
    }
  }
  &.label-70{
    &.el-row{
      .el-col{
        label{width:70px;}
        span{flex: 1;}
      }
    }
  }
  &.label-100{
    &.el-row{
      .el-col{
        label{width:100px;}
        span{flex: 1;}
      }
    }
  }
  &.label-120{
    &.el-row{
      .el-col{
        label{width:120px;}
        span{flex: 1;}
      }
    }
  }
  &.label-140{
    &.el-row{
      .el-col{
        label{width:140px;}
        span{flex: 1;}
      }
    }
  }
  
}

// 状态
// .status{
//   &-green{background:$greenLight;border-color:$greenLight2;color:$green;}
//   &-red{background:$redLight;border-color:$redLight2;color:$red;}
//   &-yellow{background:$yellowLight;border-color:$yellowLight2;color:$yellow;}
//   &-blue{background:$blueLight;border-color:$blueLight2;color:$blue;}
//   &-gray{background:$grayLight;border-color:$grayLight2;color:$gray;}
//   &-purple{background:$purpleLight;border-color:$purpleLight2;color:$purple;}
//   &-pink{background:$pinkLight;border-color:$pinkLight2;color:$pink;}
//   &-tiffany{background:$tiffanyLight;border-color:$tiffanyLight2;color:$tiffany;}
// }

// 进度样式
.step{
  &-vertical{
    li{display:flex;position:relative;padding:15px 0;
      .thumb{width:40px;height:40px;border-radius:50%;border:1px solid $lineColor;overflow:hidden;background:#fff;position:relative;z-index:3;position:relative;
        img{position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);}
      }
      .content{padding-left:15px;
        .name{
          .time{margin-left:15px;display: inline-block;}
          
        }
        .status{padding:10px 0;}
      }
      &:before{content: '';width:1px;height:100%;position:absolute;top:15px;left:20px;background:$lineColor;z-index:1;}
      &:after{content: '';width:0;height:0;border-left:6px solid transparent;border-right: 6px solid transparent;border-top:6px solid $mainColor;position:absolute;left:15px;bottom:-15px;z-index:2;}
      &:last-child{
        &::before{display:none;}
        &::after{display:none;}
      }
    }
  }
}

.el-table{
  td.el-table__cell{
    .el-button--text{
      i{
        &::before{content: '';}
      }
    }
  }
}

.el-message-box{
  .el-message-box__status{display:none;
    &+.el-message-box__message{padding-left:12px;}
  }
}


.dialog-form{
  .el-range-editor--small.el-input__inner{
    width:100%;
  }
  .el-form-item--small.el-form-item{
    margin-bottom:10px;
  }
}
